// 导入 express 模块
const express = require('express');

// 通过调用函数获得 router 实例
const router = express.Router();

// 暂时通过数组来充当数据库
const users = [
  { id: 1001 , name: '张三丰' , gender: '靓仔' , address: '武当山' },
  { id: 1002 , name: '张道陵' , gender: '靓仔' , address: '龙虎山' },
  { id: 1003 , name: '丘处机' , gender: '靓仔' , address: '终南山' }
];

/* GET users listing. */
router.get('/users/list', function(req, resp) {
  let content = `<html>
                 <head>
                    <title>用户列表</title>
                    <link rel="stylesheet" href="/stylesheets/users.css">
                 </head>
                 <body>
                  <div class="user-list">
                `;
  users.forEach( u => {
      content += `<div class="user">
                      <span>${u.id}</span>
                      <span>${u.name}</span>
                      <span>${u.gender}</span>
                      <span>${u.address}</span>
                      <span>
                        <a href="/users/edit/${u.id}">编辑</a>
                        <a href="/users/remove/${u.id}">删除</a>
                      </span>
                  </div>`;
  });
  content += `</div>
              <a href="/index.html">返回首页</a>
              </body>
              </html>`;
  resp.send( content );
});

/* POST "/users/add" */
router.post('/users/add',(req,resp)=>{
  // 从请求体中获取请求数据
  let { name , gender , address } = req.body ;
  console.log( name , gender , address );
  // 获取 users 数组中所有 user 的最大 id
  let maxId = users.reduce( (pre,curr) => Math.max(pre,curr.id) , 0 );
  // users 数组中最大的 id 加上 1 就是新 user 的id
  let id = maxId + 1 ;
  // let user = { id: id ,  name: name ,  gender: gender , address: address }
  let user = { id , name , gender , address };
  // 将 user 添加到数组中
  users.push( user );

  // 向客户端输出 HTML 片段
  // resp.send(`<p>添加成功</p><a href="/users/list">查看用户列表</a>`);

  // 通过 重定向 操作让浏览器打开 用户列表 页面
  resp.redirect('/users/list');
});

// 在路由路径中可以通过 `:paramName` 形式定义路由参数
router.get('/users/remove/:id',(req,resp) => {
  // 通过 req.params 可以获得通过 请求路径传递的参数
  let id = req.params.id;
  console.log( 'id value : ' , id , ' , id type: ' , typeof id );
  // 寻找指定 id 对应的 user 对象 在数组中的索引(下标)
  let index = users.findIndex( u => u.id == id );
  // 若能找到 user 对象则 index 就不为 -1
  if( index != -1 ) {
    // 从数组中删除 index 处 的 1 个元素
    users.splice( index , 1 );
  }

  // 向客户端发送 HTML片段
  // resp.send(`<p>删除成功</p><a href="/users/list">查看用户列表</a>`);

  // 重定向 到 用户列表
  resp.redirect('/users/list');
});

// 通过路由参数获取被修改 user 的 id
router.get('/users/edit/:id',(req,resp)=>{
  // 利用 ES6 提供的 解构赋值 获取 路由参数 
  let { id } = req.params ;
  // 从 users 数组中寻找指定 id 对应的 user
  let user = users.find( u => u.id == id );
  // 若 user 存在的话
  if( user ) {
    // 向客户端输出一个修改页面
    let editPage = '<html>';
    editPage += `<head>`;
    editPage += `<title>编辑用户</title>`;
    editPage += `</head>`;
    editPage += `<body>`;
    // 将 修改后的数据采用 POST 方式提交给 `/users/edit` 
    editPage += `<form action="/users/edit" method="post">`;
    // 将 user 的 id 以隐藏表单域形式添加到表单
    editPage += `<input type="hidden" name="id" value="${user.id}">`;
    // 将 user 的 name 显示到一个输入框中
    editPage += `姓名: <input type="text" name="name" value="${user.name}"> <br>`;
    // 将 user 的 gender 显示为 选中的单选按钮
    editPage += `性别: <input type="radio" name="gender" value="靓仔" ${ user.gender == '靓仔' ? 'checked' : ''}> 男
                      <input type="radio" name="gender" value="靓妹" ${ user.gender == '靓妹' ? 'checked' : ''}> 女 <br>`;
    // 将 user 的 address 显示到 textarea 中
    editPage += `地址: <textarea name="address">${user.address}</textarea> <br>`;
    // 添加提交按钮
    editPage += `<button type="submit">修改</button>`;
    editPage += `</form>`;
    editPage += `</body>`;
    editPage += '</html>';
    resp.send( editPage );
    return ; // 让函数立即结束
  }
  resp.send(`<p>用户不存在，请<a href="/users/list">返回</a>用户列表</p>`);
});

router.post('/users/edit',(req,resp)=>{
  // 利用 ES6 提供的 解构赋值 从请求体中获取数据
  let { id , name , gender , address } = req.body;
  // 查找指定 id 对应的用户
  let user = users.find( u => u.id == id );
  // 若 user 是存在的则修改该用户
  if( user ) {
    user.name = name;
    user.gender = gender;
    user.address = address;
  }
  // 重定向到用户列表
  resp.redirect('/users/list');
});

// 导出 router 对象
module.exports = router;
